<template>
  <div class="indexback">
    <div class="announcement">
      <div class="title">
        <i class="el-icon-message-solid"></i>
        <span>最新公告</span>
      </div>
      <div class="getpostdata">
        <postdatalist />
      </div>
    </div>

    <div class="card">
      <div class="card-item" style="min-width: 300px;">
        <allusercount />
      </div>
      <div class="card-item" style="min-width: 300px;">
        <getPayMessage />
      </div>
      <div class="card-item" style="min-width: 300px;">
        <getParkOrder />
      </div>
      <div class="card-item" style="min-width: 300px;">
        <getFeedBack />
      </div>
    </div>
    <div class="card">
      <div class="card-item midcard"><housesearchList /></div>
      <div class="card-item midcard"><GetParkOrderview /></div>
      <div class="card-item midcard" style="overflow: hidden">
        <getCostData />
      </div>
    </div>
    <div class="card">
      <div class="card-item midcard2" style="flex: 3">
        <getLoginMonth />
      </div>
      <div class="card-item midcard2" style="flex: 1">
        <getRepairData />
      </div>
    </div>
    <div class="last"></div>
  </div>
</template>

<script>
import postdatalist from "./index_component/postdatalist.vue";
import allusercount from "./index_component/allusercount.vue";
import getPayMessage from "./index_component/getPayMessage.vue";
import getParkOrder from "./index_component/getParkOrder.vue";
import getFeedBack from "./index_component/getFeedBack.vue";
import housesearchList from "./index_component/housesearchList.vue";
import GetParkOrderview from "./index_component/getParkOrderview.vue";
import getCostData from "./index_component/getCostData.vue";
import getLoginMonth from "./index_component/getLoginMonth.vue";
import getRepairData from "./index_component/getRepairData.vue";

export default {
  components: {
    postdatalist,
    allusercount,
    getPayMessage,
    getParkOrder,
    getFeedBack,
    GetParkOrderview,
    housesearchList,
    getCostData,
    getLoginMonth,
    getRepairData,
  },
};
</script>

<style lang="scss" scoped>
.indexback {
  width: 100%;
  height: 100%;
  background-color: #ededed;
  .announcement {
    width: 100%;
    height: 56px;
    background-color: #fff;
    display: flex;
    .title {
      padding: 18px;
      font-size: 13px;
      color: #389af9;
      font-weight: 600;
      min-width: 110px;
      span {
        margin-left: 5px;
      }
    }
    .getpostdata {
      flex: 1;
      background-color: yellow;
    }
  }
  .card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 9px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    .card-item {
      flex: 1; /* 使每个子元素占据相等的空间 */
      margin: 0 6px; /* 可以根据需要调整子元素之间的间距 */
      background-color: #fff; /* 示例背景色，可以根据实际需求调整 */
      height: 70px;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 6px;
    }
    .midcard {
      height: 280px;
    }
    .midcard2 {
      height: 270px;
    }
  }
  .last {
    margin-top: 10px;
    width: 100%;
    height: 75px;
    background-color: #fff;
  }
}
</style>
